<template>
  <div class="comments-container">
    <el-row>
      <el-col :span="18" :offset="4">
        <el-card class="m_t25">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用药说明列表</el-breadcrumb-item>
          </el-breadcrumb>
          <div class="flex-column p_y25">
            <div
                class="medic-link flex-row justify-between"
                v-for="(item,i) of tableData||[]" :key="i"
                @click="$router.push({name:'frontNewsInfo',query:{id:item.id,list:'list'}})">
              <div class="text-ellipsis flex1">{{ item.medicineName }} 用药说明</div>
              <div class="font12 text-light flex-shrink" style="width: 160px;">{{ format(item.createTime) }}</div>
            </div>
          </div>
          <!--分页组件 start-->
          <div class="pagination">
            <el-pagination
                background layout="total, prev, pager, next"
                :current-page="pageMeta.current_page"
                :page-size="pageMeta.limit" :total="pageMeta.total"
                @current-change="onPageChange"></el-pagination>
          </div>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import {defineComponent, reactive, ref, toRaw} from "vue"
import {deepClone, isEmpty} from "../utils/helpers";
import Toast from "../utils/Toast";
import News from "../api/modules/News";
import dayjs from "dayjs";
import {usePageMeta} from "../hooks/usePageTableData";
import {useRoute} from "vue-router";

export default defineComponent({
  name: "NewsInfo",
  methods: {
    format(time, layout = 'YYYY-MM-DD HH:mm:ss') {
      return dayjs(time).format(layout)
    }
  },
  setup() {
    const pageHandle = usePageMeta();
    const params = reactive({
      filter: "",
    });
    const tableData = ref([]); // 列表数据
    onPageChange(1); // 初始化时直接请求一次分类列表
    async function onPageChange(page) {
      const pageMeta = deepClone(toRaw(pageHandle.pageMeta.value));
      if (page) {
        pageMeta.index = page;
      }
      try {
        const _params = {
          ...pageMeta,
          ...params,
        };
        const {data} = await News.lists(_params);
        const _data = (data.data || []).map(v => {
          let content = {};
          try {
            content = JSON.parse(v.analysis) || {}
          } catch (e) {

          }
          return {
            ...v,
            ...content,
          }
        });
        tableData.value = _data; // 列表数据

        pageHandle.updatePageMeta(_params.index, data.count);

      } catch (e) {
        console.log(e);
      }
    }

    return {
      ...pageHandle,
      onPageChange,
      tableData,
    }
  },
})
</script>

<style lang="scss" scoped>
.medic-link {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  border-bottom: 1px #e5e5e5 solid;
  padding-bottom: 5px;
  padding-top: 10px;
  line-height: 30px;
  cursor: pointer;
  font-weight: normal;

  &:link {
    color: #000;
    text-decoration: none;
  }

  &:hover {
    color: #35A8F1;
  }
}


</style>
